<template>
	<view class="content">
		<view class="bg_image">
			<view class="header">
				<image @click="callback" class="icon_right" src="../../pagesSub/static/images/index_icon.png"></image>
				<view class="title">授权登录</view>
			</view>
		</view>
		<view class="content_tip">
			<!-- <image class="logo" src="/pagesSub/static/images/logo1.png"></image> -->
			<image class="logo" src="../../pagesSub/static/images/logo.jpg"></image>
			<view class="txt_title">
				<h2>山东送药上门</h2>
			</view>
			<view class="txt_tip">
				<text>
					山东送药上门服务平台，通过线上线下多渠道方式，为您提供送药上门服务，医保支付，安全便捷。
					<!-- 山东省“送药上门服务”是政府支持的面向社会提供的“医、药、护”便民服务工程。平台通过线上线下多渠道方式，为您提供送医、送药、护理上门服务，医保支付，安全便捷。 -->
				</text>
			</view>

			<!-- <view @click="openSubscribe('')" class='bnt bg-color'>授权消息</view> -->
			<!-- <button @click="showGetPhone">获取微信手机号</button> -->
			<!-- <button class="sub_btn" open-type="getPhoneNumber" @getphonenumber="getphonenumber">获取微信手机号</button> -->

			<view>
				<!-- <view class="login_tip"><text>为保证更好的使用体验请登录同步数据</text></view> -->
				<!-- <button open-type="getUserInfo" @getuserinfo="getUserProfile" class="btn_appointment arc_button"
				type="default">使用微信授权登录</button> -->
				<!-- <button hover-class="none" @tap="getUserProfile" class="bg-green btn1">微信登录</button> -->
				<!-- <view class="login_xieyi"><text>登录即表示同意我们的用户协议和隐私协议</text></view> -->
				<!-- <button type="primary bottom_btn" >add line</button> -->
			</view>
		</view>





		<view class="bottom_con">
			<checkbox-group @change="changeChe">
				<checkbox class="login_xieyi toRegister">
					<view>
						<!-- <text>登录即表示同意用户协议和隐私协议</text> -->
						<text>同意</text>
						<navigator class="link" url="/pagesSub-My/my/userAgreement?type=5" text="">
							用户协议
						</navigator>
						<text>及</text>
						<navigator class="link" url="/pagesSub-My/my/userAgreement?type=2" text="">
							隐私政策
						</navigator>
					</view>
				</checkbox>
			</checkbox-group>
			<view class="btn_content">
				<button type="primary" @click="getUserInfo" class="bottom_btn button_color">
					授权登录
				</button>
				<!-- <button type="primary" @tap="getUserProfile" class="bottom_btn button_color">授权登录</button> -->
			</view>

			<!-- 获取微信头像昵称弹窗 -->
			<uni-popup ref="userInfo" background-color="#fff">
				<view class="popup-box">
					<view class="popup-title">
						<image style="width: 18px; height: 18px; margin-right: 20rpx"
							src="../../pagesSub/static/images/logo.jpg"></image>
						<text class="popup-text">山东送药上门</text>
					</view>
					<view class="text"> 获取你的昵称、头像 </view>
					<view class="popup-flex">
						<view class="popup-text"> 头像 </view>
						<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image class="avatar" :src="avatarUrl"></image>
						</button>
					</view>
					<view class="popup-flex">
						<view class="popup-text"> 昵称 </view>
						<input type="nickname" class="weui-input" placeholder="请输入昵称" @blur="userNameInput"
							maxlength="20" v-model="nickName" />
					</view>
					<view class="popup-butbox">
						<view class="cancelbut" @click="onCancel"> 取消 </view>
						<view class="confirmbut" @click="onConfirm"> 允许 </view>
					</view>
				</view>
			</uni-popup>
			<!-- <view class="login_tip"><text>为保证更好的使用体验请登录同步数据</text></view> -->
			<!-- <view class="btn_content">
                <button
                    type="primary"
                    @tap="getUserProfile"
                    class="bottom_btn button_color"
                >
                    授权登录
                </button>
            </view> -->
		</view>

		<!-- <view class="text-area">
			<text class="title">{{title}}</text>
			<button class='item grant'  type="primary" open-type="getUserInfo" lang="zh_CN" @getuserinfo="getUserProfile">去授权</button>
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">getPhoneNumber</button>
			<button @click="showGetPhone">getPhoneNumber</button>


		</view> -->
		<!-- <view class="text-area">
			 <text class="title" @click="goto('/pages/homePage/consult/choosePeople')">选择就诊人</text>
		</view>
		<view class="text-area">
			 <text class="title" @click="goto('/pages/homePage/consult/consultation')">图文问诊</text>
		</view>
		<view class="text-area">
			 <text class="title" @click="goto('/pages/homePage/consult/consulOrder')">订单</text>
		</view> -->

		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="popup-content" :class="{
                        'popup-height': type === 'left' || type === 'right',
                    }">
					<!-- <view><image class="logo_phone" src="/pagesSub/static/images/logo1.png"></image></view> -->
					<view>
						<image class="logo_phone" src="../../pagesSub/static/images/logo.jpg"></image>
					</view>
					<view class="get_title">
						<h3>获取授权</h3>
					</view>
					<view class="get_phone gray_font">
						<text>获取手机号授权</text>
					</view>
					<view>
						<button open-type="getPhoneNumber" @getphonenumber="getphonenumber" hover-class="none"
							class="btn_appointment arc_button">
							获取手机号
						</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import Routine from '@/libs/routine';
	import wechat from '@/libs/wechat';
	import {
		getUserPhone
	} from '@/api/public.js';
	import {
		openPaySubscribe,
		weChatListTempSet,
	} from '@/utils/SubscribeMessage.js';
	import {
		getWeChatListTemp
	} from '@/api/common.js';
	import Cache from '@/utils/cache';
	import {

		BACK_URL
	} from '@/config/cache';
	export default {
		data() {
			return {
				tongYbox: false,
				title: 'Hello',
				isPhoneBox: true,
				gender: 1, //用户性别(默认写死)
				nickName: "", //用户昵称
				avatarUrl: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0", //用户头像
			};
		},
		onLoad() {
			// console.log('是否可以使用新版-------',uni.getUserProfile)
			// console.log('是否可以使用旧版-------',uni.getUserInfo)
		},
		methods: {
			changeChe(e) {
				console.log(e.detail.value);
				if (e.detail.value.length > 0) {


					this.tongYbox = true
				} else {
					this.tongYbox = false
				}


			},
			callback() {
				const pages = getCurrentPages();
				// console.log('pages----',pages)
				if (pages.length === 1) {
					uni.switchTab({
						url: '/pages/homePage/index',
					});
				} else {
					uni.navigateBack();
				}
			},
			openSubscribe: function(e) {
				let page = e;
				// #ifndef MP
				// uni.navigateTo({
				// 	url: page
				// });
				// #endif
				// #ifdef MP
				// uni.showLoading({
				// 	title: '正在加载',
				// })
				openPaySubscribe()
					.then((res) => {
						uni.hideLoading();
						// uni.navigateTo({
						// 	url: page,
						// });
					})
					.catch((err) => {
						uni.hideLoading();
					});
				// #endif
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			goto(url, checkStatus) {
				uni.navigateTo({
					url: url,
				});
			},
			showGetPhone(e) {
				this.$refs.popup.open('bottom');
			},
			// 小程序获取手机号码
			getphonenumber(e) {
				// console.log('获取手机号222222-----',e);
				// console.log(e.detail.errMsg);
				// console.log(e.detail.iv);
				// console.log(e.detail.encryptedData);
				uni.showLoading({
					title: '加载中'
				});
				Routine.getCode()
					.then((code) => {
						this.getUserPhoneNumber(
							e.detail.encryptedData,
							e.detail.iv,
							code
						);
					})
					.catch((error) => {
						uni.hideLoading();
					});
			},
			// 小程序获取手机号码回调
			getUserPhoneNumber(encryptedData, iv, code) {
				getUserPhone({
						encryptedData: encryptedData,
						iv: iv,
						code: code,
					})
					.then((res) => {
						uni.hideLoading();
						console.log('绑定手机号接口返回----', res);

						this.$refs.popup.close();
						this.$util.Tips({
							title: res,
							icon: 'success',
							endtime: 1000,
						}, {
							tab: 3,
						});
						console.log('跳转到首页999---，/pages/homePage/index');
						let login_back_url = Cache.get(BACK_URL);


						if (login_back_url == 'pages/my/drugOrderList') {
							uni.navigateBack()

						} else {

							uni.switchTab({
								url: '/pages/homePage/index',
							});
						}


					})
					.catch((res) => {
						uni.hideLoading();
						this.$util.Tips({
							title: res,
						});
						this.$refs.popup.close();
					});
			},

			// 授权登录事件
			getUserInfo() {
				if (this.tongYbox) {
					this.$refs.userInfo.open("bottom");
				} else {

					uni.showToast({
						title: "请先同意《用户协议》及《隐私政策》!",
						icon: "none",
						duration: 2000,
					});

				}
			},
			// 用户头像
			onChooseAvatar(e) {
				this.avatarUrl = e.detail.avatarUrl;
			},
			//获取昵称输入内容
			userNameInput(e) {
				this.nickName = e.detail.value;
			},
			// 取消获取昵称头像
			onCancel() {
				this.$refs.userInfo.close();
			},
			// 允许获取昵称头像
			onConfirm() {
				let that = this;
				uni.showLoading({
					title: "正在登录中",
				});
				if (this.nickName == "") {
					uni.showToast({
						title: "请输入你的昵称!",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				// 手机号
				Routine.getCode()
					.then((code) => {
						// 存用户头像、昵称到服务器
						that.getWxUserInfos(code);
					})
					.catch((res) => {
						uni.hideLoading();
					});
			},
			// 存用户头像、昵称到服务器
			getWxUserInfos(code) {
				let self = this;
				let userInfo = {
					code: code,
					avatar: this.avatarUrl, //用户头像
					nickName: this.nickName, //用户昵称
					sex: this.gender, //用户性别(写死)
					userInfo: {
						avatarUrl: this.avatarUrl, //用户头像
						nickName: this.nickName, //用户昵称
						gender: this.gender, //用户性别(写死)
					},
				};
				console.log(11111, 'userInfo', userInfo)
				Routine.authUserInfo(userInfo.code, userInfo)
					.then((res) => {
						if (res.code == 200) {
							this.$refs.userInfo.close();
							self.$store.commit("LOGIN", {
								token: res.data.token,
							});
							self.$store.commit("VIDEOID", {
								userVideoId: res.data.userVideoId,
							});
							self.$store.commit("SECRT", {
								userSig: res.data.secrt,
							});


							self.$store.commit("pointFlag", res.data.pointGiveawayFlag);


							self.$store.commit("VIDERKEY", {
								sdkAppID: 1400761038,
							});

							self.$store.commit("SETUID", res.data.uid);
							uni.hideLoading();
							this.$refs.popup.open("bottom");
							weChatListTempSet()
								.then((res) => {})
								.catch((err) => {
									console.log(err);
								});
						} else {
							uni.hideLoading();
						}
					})
					.catch((res) => {
						uni.hideLoading();
						uni.showToast({
							title: res,
							icon: "none",
							duration: 2000,
						});
					});
			},
			// getPhoneNumber(e) {
			// 	console.log('获取手机号-----');
			// 	console.log('获取手机号-----',e);
			// 	console.log(e.detail.errMsg);
			// 	console.log(e.detail.iv);
			// 	console.log(e.detail.encryptedData);
			// },
			getUserProfile() {
				let self = this;
				uni.showLoading({
					title: '正在登录中',
				});
				Routine.getUserProfile()
					.then((res) => {
						Routine.getCode()
							.then((code) => {
								self.getWxUser(code, res);
							})
							.catch((res) => {
								uni.hideLoading();
							});
					})
					.catch((res) => {
						uni.hideLoading();
					});
			},


			getWxUser(code, res) {
				let self = this;
				let userInfo = res.userInfo;
				userInfo.code = code;
				// console.log(userInfo,'登录的获取的信息00999---')
				// userInfo.spread_spid = app.globalData.spid; //获取推广人ID
				// userInfo.spread_code = app.globalData.code; //获取推广人分享二维码ID
				userInfo.avatar = userInfo.userInfo.avatarUrl;
				userInfo.city = userInfo.userInfo.city;
				userInfo.country = userInfo.userInfo.country;
				userInfo.nickName = userInfo.userInfo.nickName;
				userInfo.province = userInfo.userInfo.province;
				userInfo.sex = userInfo.userInfo.gender;
				userInfo.type = 'routine';
				Routine.authUserInfo(userInfo.code, userInfo)
					.then((res) => {
						console.log('登录信息', res);
						self.authKey = res.data.key;
						// self.$store.commit('LOGIN', {
						// 	token: res.data.token
						// });
						// self.$store.commit("SETUID", res.data.uid);
						// if (res.data.type === 'register') {
						// 	uni.hideLoading();
						// 	self.isPhoneBox = true
						// }

						if (res.code == 200) {
							// .data.type === 'login'
							self.$store.commit('LOGIN', {
								token: res.data.token,
							});
							self.$store.commit('SETUID', res.data.uid);
							self.$store.commit(
								'SET_PATIENT_ID',
								res.data.patientId
							);
							uni.hideLoading();
							this.$refs.popup.open('bottom');
							// self.getUserInfo();
							//查询微信订阅消息模板
							// this.weChatListTemp();
							weChatListTempSet()
								.then((res) => {})
								.catch((err) => {
									console.log(err);
								});
						} else {
							uni.hideLoading();
						}
					})
					.catch((res) => {
						uni.hideLoading();
						uni.showToast({
							title: res,
							icon: 'none',
							duration: 2000,
						});
					});
			},
		},
	};
</script>

<style lang="stylus" scoped>
	.popup-content {
		text-align: center;
		padding: 15px;
		background-color: #fff;
	}

	.content_tip {
		padding: 40rpx;
		text-align: center;
	}

	.bottom_btn {
		border-radius: 0;
		// background-color: #E76940;
		background: -webkit-linear-gradient(#77E2A4, #4CCDBC);
		color: #FFFFFF !important;
		font-size: 36rpx;
		padding: 5rpx 14px;
	}

	.btn_content {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
	}

	.bottom_con {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
	}

	.arc_button {
		background: -webkit-linear-gradient(#77E2A4, #4CCDBC);
		color: #FFFFFF !important;
	}

	// 去注册
	.toRegister {
		font-size: 26rpx;
		line-height: 58rpx;

		.link {
			display: inline-block;
			margin-left: 10rpx;
			color: #3cb4ff;
		}
	}

	.logo_phone {
		height: 150rpx;
		width: 150rpx;
		margin-top: 20rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20rpx;
	}

	.get_title {
		font-size: 36rpx;
	}

	.get_phone {
		margin: 20rpx 0;
		font-size: 30rpx;
		color: #868686;
	}

	.txt_title {
		font-size: 40rpx;
	}

	.txt_tip {
		font-size: 32rpx;
		line-height: 47rpx;
		color: #727272;
		margin: 20rpx 0;
		text-align: justify;
		text-align-last: center;
	}

	.login_tip {
		color: #0F0F0F;
		font-size: 33rpx;
		margin-bottom: 30rpx;
	}

	.login_xieyi {
		color: #0F0F0F;
		font-size: 30rpx;
		margin-bottom: 15rpx;
	}

	.content {
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;
	}

	.logo {
		// height: 200rpx;
		// width: 200rpx;
		// margin-top: 100rpx;
		width: 359rpx;
		height: 362rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30rpx;
		border-radius: 30rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.bg_image {
		// background-image: url(../../pagesSub/static/images/bg_h_doc@2x.png);
		width: 100%;
		height: 130rpx;
		background-size: 100% 100%;
		position: relative;
		background: #fff;
	}

	.header {
		display: flex;
		padding: 15rpx 30rpx;
		padding-top: 40rpx;
	}

	.header>.title {
		color: #000;
		margin-left: 32%;
		margin-top: 20rpx;
		font-size: 32rpx;
		font-weight: 600;
	}

	.icon_right {
		width: 45rpx;
		height: 45rpx;
		margin-top: 23rpx;
	}


	.popup-box {
		padding: 30px 20px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.popup-title {
		display: flex;
		align-items: center;
	}

	.text {
		font-size: 14px;
		margin-top: 20px;
		text-align: left;
	}

	.popup-flex {
		padding: 15px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #E4E4E4;

		button::after {
			border: none
		}
	}

	.popup-text {
		font-size: 14px;
	}

	.avatar-wrapper {
		height: 50px;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		border-radius: 0 !important;
		background-color: #fff;
	}

	.avatar {
		width: 50px;
		height: 50px;
	}

	.weui-input {}

	.popup-butbox {
		margin-top: 20px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.cancelbut {
		padding: 8px 40px;
		color: #05C160;
		font-size: 14px;
		border-radius: 10px;
		background-color: #F2F2F2;
	}

	.confirmbut {
		padding: 8px 40px;
		color: #fff;
		font-size: 14px;
		border-radius: 10px;
		background-color: #05C160;
	}
</style>